<template>
  <div>
    <div class="nav">
      <ul>
        <li>全部</li>
        <li>降价</li>
        <li>常卖</li>
        <li>分类</li>
      </ul>
    </div>
    <div class="goods" v-for="(item) in arrInfo " :key="item.id">
      <div class="select">
        <input type="checkbox" v-model="item.checked" @change="changeOne" />
      </div>
      <div class="img">
        <img :src="$pre+item.img" alt />
      </div>
      <div class="des">
        <p>{{item.name}}</p>
        <p class="guige">规格：{{item.guige}}</p>
        <p class="cheap">
          <span>比加入时降低￥{{item.cheap}}</span>
        </p>
        <p class="price">
          <span>{{item.price}}</span>
          <s>{{item.oldPrice}}</s>
        </p>
      </div>
      <div class="btn">
        <button @click="sub(item.id)">-</button>
        <span>{{item.num}}</span>
        <button @click="add(item.id)">+</button>
        <button @click="del(item.id)">删除</button>
      </div>
    </div>

    <div class="buy">
      <ul>
        <li>
          <input type="checkbox" @change="allChecked" v-model="checkedAll" /> 全选
        </li>
        <li>合计:{{allPrice}}</li>
        <li class="goBuy" @click="goOrder">去结算</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Info, Toast } from "vant";
import { reqCar, reqDelCar, reqShopEdit } from "../../http/api";
export default {
  data() {
    return {
      arrInfo: [],
      checkedAll: false,
      isRequest: true,
    };
  },
  methods: {
    // 获取数据的封装
    getDate() {
      // 将原本的checked先保存
      let checkeds = [...this.arrInfo];
      reqCar({
        uid: JSON.parse(localStorage.getItem("user")).uid,
      }).then((res) => {
        // 此时将允许发请求
        this.isRequest = true;
        // 防止数据库中没有数据导致arrInfo为null
        let list = res.data.list ? res.data.list : [];
        list.forEach((item) => {
          // 如果原本有存   就取原本对应的checked  如果没有  就是false
          // 这里的i  指的是checked中的每一项
          item.checked = checkeds.find((i) => i.id === item.id)
            ? checkeds.find((i) => i.id === item.id).checked
            : false;
        });
        this.arrInfo = list;
        console.log(this.arrInfo);
      });
    },

    allChecked() {
      for (let item of this.arrInfo) {
        item.checked = this.checkedAll;
      }
    },
    goOrder() {
      let result = this.arrInfo.some((item) => {
        return item.checked;
      });
      console.log(result);
      if (!result) {
        Toast("请至少选择一件商品");
        return;
      }
      let str = this.arrInfo.reduce(
        (val, item) => (item.checked ? (val += item.id + ",") : val),
        ""
      );
      let json = {
        countmoney: this.allPrice,
        countnumber: this.arrInfo.reduce(
          (val, item) => (item.checked ? (val += item.num) : val),
          0
        ),
        idstr: str.slice(0, str.length - 1),
      };
      console.log(json);
      localStorage.setItem("order", JSON.stringify(json));
      this.$router.push("/order");
    },
    changeOne() {
      this.checkedAll = this.arrInfo.every((item) => {
        return item.checked;
      });
    },
    sub(id) {
      // console.log(11);
      // this.arrInfo[index].num--;
      // this.arrInfo[index].num = Math.max(this.arrInfo[index].num, 1);
      if (this.isRequest) {
        this.isRequest = false;
        reqShopEdit({
          id: id,
          type: 1,
        }).then((res) => {
          this.getDate();
        });
      }
    },
    add(id) {
      // this.arrInfo[index].num++;
      // this.arrInfo[index].num = Math.min(this.arrInfo[index].num, 8);

      if (this.isRequest) {
        this.isRequest = false;
        reqShopEdit({
          id: id,
          type: 2,
        }).then((res) => {
          this.getDate();
        });
      }
    },
    del(id) {
      reqDelCar({
        id: id,
      }).then((res) => {
        if (res.data.code == 200) {
          Toast("删除成功");
          this.$router.go(0);
        }
      });
    },
  },

  computed: {
    allPrice() {
      let sum = 0;
      for (let item of this.arrInfo) {
        if (item.checked) {
          sum += item.num * item.price;
        }
      }
      return sum;
    },
  },
  mounted() {
    this.getDate();
  },
};
</script>

<style scoped>
.img img {
  width: 100%;
  height: 100%;
}
.buy {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0.8rem;
}
.buy ul {
  background: white;
}
.buy ul li {
  color: black;
}
.buy .goBuy {
  width: 2rem;
  text-align: center;
  background: tomato;
}
.goods button {
  width: 0.6rem;
}
.goods .btn {
  margin-top: 0.8rem;
}
.goods p {
  margin-bottom: 0.2rem;
}
.price s {
  font-size: 0.3rem;
}
.cheap {
  font-size: 0.26rem;
}
.cheap span {
  color: tomato;
}
.goods {
  display: flex;
  /* background: violet; */
  position: relative;
  font-size: 0.4rem;
  margin-bottom: 0.2rem;
}
.select {
  width: 1rem;
}
.select input {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  margin-left: 0.1rem;
}
.guige {
  font-size: 0.3rem;
}
.img {
  width: 2rem;
}
.des {
  width: 2.5rem;
}
ul {
  display: flex;
  background: tomato;
}
li {
  flex: 1;
  font-size: 0.46rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  color: white;
}
</style>